<template>
    <div v-if="pageflag">
        <div class="chart-container">
            <Echart id="charts_rlt" :options="options" class="left_center_inner" ref="charts" height="300px" />
            <!-- 底座背景 -->
            <div class="bg"></div>
        </div>
    </div>
    <Reacquire v-else @onclick="getData" style="line-height: 300px">
        重新获取
    </Reacquire>
</template>

<script>
import { currentPOST } from 'api/modules';
import { colorsA, colorsB, legend, xAxis, yAxis } from '@/config/EChartVar';
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改
import { graphic } from 'echarts';

export default {
    data() {
        return {
            options: {},
            optionData: [
                {
                    name: '厢式',
                    value: 22,
                    itemStyle: {
                        color: '#25989D',
                    },
                },

                {
                    name: '平板',
                    value: 36,
                    itemStyle: {
                        color: '#134C84',
                    },
                },
                {
                    name: '高栏',
                    value: 14,
                    itemStyle: {
                        color: '#EF8035',
                    },
                },
                {
                    name: '飞翼',
                    value: 36,
                    itemStyle: {
                        color: '#9FD7F4',
                    },
                },
            ],
            pageflag: true,
            timer: null,
        };
    },
    created() {
        this.getData();
    },
    mounted() { },
    beforeDestroy() {
        this.clearData();
    },
    methods: {
        clearData() {
            if (this.timer) {
                clearInterval(this.timer);
                this.timer = null;
            }
        },
        getData() {
            this.pageflag = true;
            this.init(this.countUserNumData);
        },
        //轮询
        switper() {
            if (this.timer) {
                return;
            }
            let looper = (a) => {
                this.getData();
            };
            this.timer = setInterval(
                looper,
                2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
            );
            let myChart = this.$refs.charts.chart;
            myChart.on('mouseover', (params) => {
                this.clearData();
            });
            myChart.on('mouseout', (params) => {
                this.timer = setInterval(
                    looper,
                    2000 // this.$store.state.setting.echartsAutoTime // staticAutoTime
                );
            });
        },
        init(currentData) {
            let legend = {
                // orient: "horizontal",
                bottom: '10%',
                left: '10%',
                itemGap: 5,
                formatter: function (param) {
                    return param;
                },
            };
            // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
            const options = getPie3D(this.optionData, 0, 330, 25, 16, 0.9, legend);
            // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
            options.series.push({
                name: '货物品类占比', //自己根据场景修改
                backgroundColor: 'transparent',
                type: 'pie',
                label: {
                    show: true,
                    opacity: 1,
                    fontSize: 13,
                    lineHeight: 20,
                    formatter: "{d}%",
                },
                startAngle: -40, // 起始角度，支持范围[0, 360]。
                clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                radius: ['20%', '50%'],
                // center: ['50%', '50%'],
                data: this.optionData,
                itemStyle: {
                    opacity: 0, //这里必须是0，不然2d的图会覆盖在表面
                },
            });
            this.options = options;
        },
    },
};
</script>
<style lang="scss" scoped>
.chart-container {
    margin-top: 5px;
    position: relative;
    width: 100%;
    height: 50%;

    .left_center_inner,
    .bg {
        margin-left: -10px;
        width: 100%;
        height: 100%;
    }

    .left_center_inner {
        top: -35px;
        z-index: 1;
    }

    .bg {
        position: absolute;
        bottom: 88px;
        left: 51%;
        // z-index: -1;
        width: 270px;
        height: 185px;
        background: no-repeat center;
        background-image: url('../../../assets/img/launch/pie_bg.png');
        background-size: 100% 100%;
        transform: translateX(-50%);
    }
}
</style>